<template>
  <q-dialog v-model="detail"  >
      <OrderDetailPage :part-id="partId" :order-id="orderId"></OrderDetailPage>
  </q-dialog>
  <q-dialog v-model="repairingDetail" >
    <MyBigDialog title="Repairing Detail">
      <FinalCheckForm class="q-pa-md" mode="report" :is-parent="isParent" :serial-no="serialNo" :stock-code="stockCode" :order-id="orderId"></FinalCheckForm>
    </MyBigDialog>
  </q-dialog>
  <ReportPage>
    <q-table
        class="my-table card-radius"
        wrap-cells
        flat
        bordered
        title="Mean Time Between Failure"
        titleClass="page-header"
        :filter="filter"
        :pagination="{ rowsPerPage: 50 }"
        row-key="id"
        no-data-label="No data found."
        no-results-label="The filter didn't uncover any results"
        :columns="createForm.data.timecolumns"
        :rows="createForm.data.timerows"
        
      >
      <template v-slot:top-row="props">
        <q-td>
          <!-- {{ props.cols[0].label }} -->
          <q-input
            borderless
            :label="props.cols[0].label"
            dense
            v-model="query.data.stock_code"
            filled
          >
            <template v-slot:default>
              <q-icon name="search" />
            </template>
          </q-input>
      </q-td>
      <q-td>
          <q-input
            borderless
            :label="props.cols[1].label"
            dense
            v-model="query.data.short_description"
            filled
          >
            <template v-slot:default>
              <q-icon name="search" />
            </template>
          </q-input></q-td>
        <q-td><q-input
            borderless
            :label="props.cols[2].label"
            v-model="query.data.mtbf"
            dense
            filled
          >
            <template v-slot:default>
              <q-icon name="search" />
            </template>
          </q-input></q-td>
      </template>
      </q-table>
  </ReportPage>
  <q-dialog style="width: 500px;display: flex;flex-direction: column;" class="overflow-hidden card-radius"  v-model="searchdig">
        <q-card>
        <q-toolbar class="popup-header">
            <q-toolbar-title  class="q-ma-md cap">
                Search
            </q-toolbar-title>
            <q-space />
                <q-btn
                icon="close"
                size="lg"
                flat
                round
                dense
                v-close-popup
                />
            </q-toolbar>
            <q-card-section class="q-gutter-y-sm row">
                
                <q-item-label class="col-4 fal">Stock Code:</q-item-label>
                <q-input
                borderless
                v-model="createForm.data.stock_code"
                use-input
                input-debounce="0"
                hide-bottom-space
                lazy-rules
                class="col-8 fal input-css"
                :dense="true"
                >
                </q-input>
                <q-item-label class="col-4 fal">Serial No.:</q-item-label>
                <q-input
                borderless
                v-model="createForm.data.serial_no"
                use-input
                input-debounce="0"
                hide-bottom-space
                lazy-rules
                class="col-8 fal input-css"
                :dense="true"
                >
                </q-input>
                <q-item-label class="col-4 fal">System:</q-item-label>
                <q-input
                borderless
                v-model="createForm.data.system"
                use-input
                input-debounce="0"
                hide-bottom-space
                lazy-rules
                class="col-8 fal input-css"
                :dense="true"
                >
                </q-input>
                <q-item-label class="col-4 fal">Workgroup:</q-item-label>
                <q-input
                borderless
                v-model="createForm.data.work_group"
                use-input
                input-debounce="0"
                hide-bottom-space
                lazy-rules
                class="col-8 fal input-css"
                :dense="true"
                >
                </q-input>
                <q-item-label class="col-4 fal">Location:</q-item-label>
                <q-input
                borderless
                v-model="createForm.data.location"
                use-input
                input-debounce="0"
                hide-bottom-space
                lazy-rules
                class="col-8 fal input-css"
                :dense="true"
                >
                </q-input>
                <div style="width: 100%;display: flex; justify-content: center;align-items: center;">
                    <q-btn class="default-btn" style="height: 32px;" @click="getreportlist">Sumbit</q-btn>
                </div>
            </q-card-section>
        </q-card>
    </q-dialog>
</template>

<script setup lang="ts">
import ReportPage from 'src/pages/ReportPage.vue';
import { HistoryReport, HistorySearch, RepairOrderHistory } from 'src/services/type';
import {ref, provide, computed, onMounted, reactive, watch} from 'vue';
import { QTableColumn, useQuasar } from 'quasar';
import { exportTable } from 'src/utils/exportCsvUtils';
import { OutgoingRecord, splorp } from 'src/services/type';
import { repairOrderHistory } from 'src/services/reportService';
import { formatDateTimeString } from 'src/utils/dateUtils';
import {  meanlist ,reportquery} from 'src/services/type';
import { get_mean_list } from 'src/services/SpareLocationReport';
import { useRouter } from 'vue-router';
// import ObsolescenceTip from '../ObsolescenceTip.vue';
const header = ref('History');
const filter = ref('');
const query=reactive<{
  data:reportquery;
}>({
  data:{
    stock_code:'',
    short_description:'',
    mtbf:''
  }
})
const createForm = reactive<{
  data: meanlist;
}>({
  data: {
    timerows: [],
    timecolumns: [
      {
        name: 'stock_code',
        label: 'Stock Code',
        field: 'stock_code',
        align: 'center',
        sortable: true,
      },
      {
        name: 'short_description',
        label: 'Short Description',
        field: 'short_description',
        align: 'center',
        sortable: true,
      },
      { name: 'MTBF', label: 'MTBF', field: 'MTBF', sortable: true,align: 'center' },
    ],
  },
});
watch(query.data, () => {
      // 调用筛选函数
      console.log(111111)
      resportlist();
    });
const reportlist=ref([])
async function resportlist() {
  createForm.data.timerows=reportlist.value.filter(item=>{
    return (
        item.stock_code.includes(query.data.stock_code) &&
        item.short_description.includes(query.data.short_description) &&
        item.MTBF.includes(query.data.mtbf)
      );
  })
}
async function getlist(){
  const res = await get_mean_list();
  createForm.data.timerows = res.data.data;
  reportlist.value=res.data.data
}
onMounted(() => {
  getlist()
});
const $q = useQuasar();

/* const = ref() */
const orderId = ref(0)
const partId = ref(0)
const serialNo = ref('')
const stockCode = ref('')
const isParent = ref(false)

const searchDig = ref(false)

const detail = ref(false)
const repairingDetail = ref(false)

const rows = ref<RepairOrderHistory[]>()

async function search(form: { data: HistorySearch}){
  showLoading()
  const res =  await repairOrderHistory(form.data)
  console.log(res);
  rows.value = res
  searchDig.value = false
  $q.loading.hide()
}


function showLoading() {
  $q.loading.show({
    message: 'Doing something. Please wait...',
    boxClass: 'bg-grey-2 text-grey-9',
    spinnerColor: 'primary',
  });
}

function openOrderDetail(order_id: number, part_id:number){
  detail.value = true
  orderId.value =order_id
  partId.value =part_id
}

function openRepairingDetail(order_id: number, stock_code: string, serial_no: string, is_parent: boolean){
  repairingDetail.value = true
  orderId.value = order_id
  stockCode.value = stock_code
  serialNo.value = serial_no
  isParent.value = is_parent
  
}

const router = useRouter();

function onRowClick(evt: any, row: any) {
  router.push(`/maintenance/order/${row.id}`);

}


// function dblclickFn(evt: any, row: RepairOrderHistory, index: number) {
//   id.value = row.id ;
//   part_id.value = row.part_id ;
//   detail.value = true;
// }
</script>

<style scoped></style>
